---
title: 开始上手
version: 3
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";
import pubspec from "./getting_started/pubspec";
import dartHelloWorld from "./getting_started/dart_hello_world";
import pubadd from "./getting_started/pub_add";
import helloWorld from "./getting_started/hello_world";
import dartPubspec from "./getting_started/dart_pubspec";
import dartPubadd from "./getting_started/dart_pub_add";
import {
  trimSnippet,
  AutoSnippet,
  When,
} from "../../../../src/components/CodeSnippet";

---

## 在线尝试 Riverpod

在 [Dartpad](https://dartpad.dev/?null_safety=true&id=ef06ab3ce0b822e6cc5db0575248e6e2) 上感受 Riverpod 的魅力。

## 安装包文件

当你确定好你想要安装的包文件后，像这样继续将依赖添加到你的应用中：

<Tabs
  groupId="riverpod"
  defaultValue="flutter_riverpod"
  values={[
    { label: 'Flutter 项目', value: 'flutter_riverpod', },
    { label: '纯 Dart 项目', value: 'riverpod', },
  ]}
>
<TabItem value="flutter_riverpod">

  <AutoSnippet title="Terminal" {...pubadd}></AutoSnippet>

</TabItem>

<TabItem value="riverpod">

<AutoSnippet title="Terminal" {...dartPubadd}></AutoSnippet>

</TabItem>

</Tabs>

当然，你也可以手动将依赖添加到应用中的`pubspec.yaml`：

<Tabs
  groupId="riverpod"
  defaultValue="flutter_riverpod"
  values={[
    { label: 'Flutter', value: 'flutter_riverpod', },
    { label: 'Dart only', value: 'riverpod', },
  ]}
>
<TabItem value="flutter_riverpod">

<AutoSnippet title="pubspec.yaml" language="yaml" {...pubspec}></AutoSnippet>

然后使用 `flutter pub get` 命令来安装包文件。

<When codegen={true}>
  最后，运行代码生成器 {" "}
  <code>flutter pub run build_runner watch</code>
</When>

</TabItem>
<TabItem value="riverpod">

<AutoSnippet
  title="pubspec.yaml"
  language="yaml"
  {...dartPubspec}
></AutoSnippet>

然后使用 `dart pub get` 命令来安装包文件。

<When codegen={true}>
  最后，运行代码生成器 {" "}
  <code>flutter pub run build_runner watch</code>
</When>

</TabItem>
</Tabs>

就是这样，你已成功将 [Riverpod] 添加到你的应用当中!

## 启用 riverpod_lint/custom_lint

Riverpod 附带一个可选的 [riverpod_lint] 包，
它提供了lint规则来帮助你编写更好的代码且提供了一些自定义重构选项。

如果遵循了上一步骤，那你应该已经安装好这个包了，但需要额外的步骤来启用它。

为了开启 [riverpod_lint]，你需要向你的 `pubspc.yaml` 旁边新建一个 `analysis_options.yaml` 配置
并包含下面的内容：

<CodeBlock language="yaml" title="analysis_options.yaml">
  {`analyzer:
  plugins:
    - custom_lint`}
</CodeBlock>

如果你使用riverpod并在代码中写错了，那么就会在IDE中看到一些警告信息。

前往 [riverpod_lint] 页面查看更多关于警告信息和重构的内容。

:::note
用 `dart analyze` 命令这些警告不会显示。
如果你想在CI或者终端中检查这些警告信息，你可以运行：

```sh
dart run custom_lint
```

:::

## 使用示例: Hello world

安装完 [Riverpod]，我们就可以使用了。

下面的代码片段展示了如何使用我们的新依赖来创建一个 "Hello world"：

export const foo = 42;

<Tabs
  groupId="riverpod"
  defaultValue="flutter_riverpod"
  values={[
    { label: "Flutter 项目", value: "flutter_riverpod" },
    { label: "纯 Dart 项目", value: "riverpod" },
  ]}
>
<TabItem value="flutter_riverpod">

<AutoSnippet
  title="lib/main.dart"
  language="dart"
  {...helloWorld}
></AutoSnippet>

你可以使用 `flutter run` 命令来运行。
这会在你的设备上渲染 "Hello world" 的文字。

</TabItem>
<TabItem value="riverpod">

<AutoSnippet
  title="lib/main.dart"
  language="dart"
  {...dartHelloWorld}
></AutoSnippet>

你可以使用 `dart lib/main.dart` 命令来运行。
这会在你的控制台打印 "Hello world" 的字样。

</TabItem>
</Tabs>

## 更进一步：安装代码片段插件

如果你使用 `Flutter` 和 `VS Code`，推荐使用 [Flutter Riverpod Snippets](https://marketplace.visualstudio.com/items?itemName=robert-brunhage.flutter-riverpod-snippets)

如果你使用 `Flutter` 和 `Android Studio` 或 `IntelliJ`，推荐使用 [Flutter Riverpod Snippets](https://plugins.jetbrains.com/plugin/14641-flutter-riverpod-snippets)

![img](/img/snippets/greetingProvider.gif)

## 选择你的下一步

学习一些基础的概念:

- [了解更多关于 provider 的内容](/docs/concepts/providers)

遵循专题手册：

- [如何测试 provider](/docs/cookbooks/testing)

[riverpod]: https://github.com/rrousselgit/riverpod
[hooks_riverpod]: https://pub.dev/packages/hooks_riverpod
[flutter_riverpod]: https://pub.dev/packages/flutter_riverpod
[flutter_hooks]: https://github.com/rrousselGit/flutter_hooks
[riverpod_lint]: https://pub.dev/packages/riverpod_lint
